<!--
 * @Author: your name
 * @Date: 2022-04-20 09:55:36
 * @LastEditTime: 2022-04-21 16:57:24
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceabilitythree\components\growing-environment-data.vue
-->
<!--
 * @Author: your name
 * @Date: 2022-03-02 13:34:55
 * @LastEditTime: 2022-04-19 14:57:58
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceability\components\growing-data.vue
-->
<template>
  <el-card v-if="growthdatalist.length > 0" id="growing" class="box-card">
    <div slot="header" class="clearfix">
      <span>环境数据 ENVIRONMENTAL DATA</span>
    </div>
    <div class="base-zh-title">生长环境数据</div>
    <ul :style="startTime !== endTime?'height:330px':'height:180px'">
      <li v-for="(item, index) in growthdatalist" :key="index" @click="getEnvironmentItemList(item.dataItemId, item.dataItemName)">
        <div :style="startTime !== endTime?'height:40%':'height:80%'" class="top">
          <svg-icon :icon-class="item.url" />

          <span class="left-top-name">{{ item.dataItemName }}
            <span v-if="item.dataItemName === '酸碱度'">（ph值）</span>
          </span>
        </div>
        <span v-if="item.dataItemName !== '光照度'" style="color:rgba(246, 189, 22, 1)">
          平均： {{ item.average.toFixed(2) }}{{ item.symbol }}
        </span>
        <span v-if="item.dataItemName === '光照度'" style="color:rgba(246, 189, 22, 1)">
          平均： {{ item.average.toFixed(2) }}{{ item.symbol }}
        </span>
        <span v-if="item.dataItemName !== '光照度' && startTime !== endTime" style="color:rgba(232, 104, 74, 1)">
          最高： {{ item.max.toFixed(2) }}{{ item.symbol }}
        </span>
        <span v-if="item.dataItemName === '光照度' && startTime !== endTime" style="color:rgba(232, 104, 74, 1)">
          最高： {{ item.max.toFixed(2) }}{{ item.symbol }}
        </span>
        <span v-if="item.dataItemName !== '光照度' && startTime !== endTime" style="color:rgba(91, 143, 249, 1)">
          最低： {{ item.min.toFixed(2) }}{{ item.symbol }}
        </span>
        <span v-if="item.dataItemName === '光照度' && startTime !== endTime" style="color:rgba(91, 143, 249, 1)">
          最低： {{ item.min }}{{ item.symbol }}
        </span>
        <span v-if="item.dataItemName === '空气温度' && startTime !== endTime">
          积温： {{ item.cumulative.toFixed(2) }}{{ item.symbol }}
        </span>
      </li>
    </ul>

    <!-- 通用弹出框 -->
    <el-dialog :title="title" :visible.sync="environmVisible">
      <zhecharts
        v-loading="loading"
        :isshowleg="false"
        :cdata="everchartdatalist"
        :nowwidth="'100%'"
        :nowheight="'600px'"
        :font-size="16"
        :fontcolor="'#000'"
      />
    </el-dialog>
  </el-card>
</template>

<script>
import graApi from "@/api/trace-source-web/production-api/index-primary.js";
import zhecharts from "@/components/Echarts/components/linechart/charts.vue";

export default {
  components: {
    zhecharts
  },
  props: {
    batId: {
      type: [Number, String],
      default: 0
    },
    startTime: {
      type: [Number, String],
      default: () => ""
    },
    endTime: {
      type: [Number, String],
      default: () => ""
    }
  },
  data() {
    return {
      growthdatalist: [],
      environmVisible: false,
      everchartdatalist: {
        xAxisdata: [],
        xData: [],
        seriesData: [],
        yAxisName: '',
        unitName: ''
      },
      title: '',
      loading: false
    };
  },
  watch: {
    startTime: {
      handler(val) {
        this.getgrowthdatachart();
      }
    }
  },
  mounted() {
    if (this.batId > 0) {
      this.getgrowthdatachart();
    }
    // this.getgrowthdatachart();
  },
  methods: {
    // 获取生长环境数据ucharts图
    getgrowthdatachart() {
      let params = {
        batchNo: this.batId,
        startDate: this.startTime,
        endDate: this.endTime
      };
      graApi.getEnvironmentItems(params).then(res => {
        // console.log(res.data.data);
        let list = res.data;
        // if (list) {
        let listone = list;
        if (listone[0]) {
          listone.forEach((itemone, indexone) => {
            if (itemone.dataItemName === "空气温度") {
              this.$set(
                itemone,
                "url",
                "kongqiwendu"
              );
            } else if (itemone.dataItemName === "空气湿度") {
              this.$set(
                itemone,
                "url", "shidu"
              );
            } else if (itemone.dataItemName === "光照度") {
              this.$set(
                itemone,
                "url", "guangzhaodu"
              );
            } else if (itemone.dataItemName === "土壤温度") {
              this.$set(
                itemone,
                "url", "turangwengdu"
              );
            } else if (itemone.dataItemName === "土壤湿度") {
              this.$set(
                itemone,
                "url", "turangshidu"
              );
            } else if (itemone.dataItemName === "酸碱度") {
              this.$set(
                itemone,
                "url", "ph"
              );
            } else {
              console.log("空字符串出现");
            }
          });
          this.growthdatalist = listone;
          // console.log(listone);
        }
        // }
      });
    },
    getEnvironmentItemList(val, name) {
      this.everchartdatalist = {
        xAxisdata: [],
        xData: [],
        seriesData: [],
        yAxisName: '',
        unitName: ''
      }
      if (this.startTime === this.endTime) {
        let params = {
          dataItemId: val,
          startTime: this.startTime + ' 00:00:00',
          endTime: this.endTime + ' 23:59:59'
        };
        this.loading = true
        this.title = name
        this.environmVisible = true
        graApi.getEnvironmentCalendarItemList(params).then(res => {
          let list = res.data
          // console.log(list)
          let nowunit = ''
          switch (name) {
            case "空气温度":
              nowunit = "℃";
              break;
            case "空气湿度":
              nowunit = "%";
              break;
            case "光照度":
              nowunit = "Lux";
              break;
            case "土壤温度":
              nowunit = "℃";
              break;
            case "土壤湿度":
              nowunit = "%";
              break;
            default:
              break;
          }
          // console.log(listtwo[listone[i]])
          let newlist = {
            xAxisdata: list.dateList,
            xData: list.dateList,
            seriesData: [
              { data: list.dataList, name: name, type: "line" }
            ],
            yAxisName: nowunit,
            unitName: nowunit
          };
          this.everchartdatalist = newlist;
          this.loading = false
        })
      } else {
        let params = {
          batchNo: this.batId,
          startDate: this.startTime,
          endDate: this.endTime
        };
        graApi.getEnvironmentItemList(val, params).then(res => {
          let list = res.data
          // console.log(list)
          let nowunit = ''
          switch (list.dataTypeName) {
            case "空气温度":
              nowunit = "℃";
              break;
            case "空气湿度":
              nowunit = "%";
              break;
            case "光照度":
              nowunit = "Lux";
              break;
            case "土壤温度":
              nowunit = "℃";
              break;
            case "土壤湿度":
              nowunit = "%";
              break;
            default:
              break;
          }
          this.title = list.dataTypeName
          // console.log(listtwo[listone[i]])
          let newlist = {
            xAxisdata: list.dateList,
            xData: list.dateList,
            seriesData: [
              { data: list.dataList, name: list.dataTypeName, type: "line" }
            ],
            yAxisName: nowunit,
            unitName: nowunit
          };
          this.everchartdatalist = newlist;
          // console.log(newlist)

          this.environmVisible = true
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#growing {
  .el-input {
    margin-left: 10px;
    width: 50%;
    ::v-deep .el-input__inner {
      border: 0;
      height: 25px;
      background-color: rgba($color: #0e4352, $alpha: 1);
      border-radius: 40px;
      text-align: center;
    }
  }
  ::v-deep .el-card__body {
    padding: 10 10px;
    .base-zh-title {
      width: 100%;
      // font-weight: 600;
      height: 45px;
      line-height: 45px;
      margin-left: 20px;
      font-size: 22px;
    }
    ul {
      width: 100%;
      padding: 0;
      margin: 0;
      height: 330px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      overflow: hidden;
      li {
        width: 15%;
        background-color: #0f4656;
        list-style-type: none;
        margin-bottom: 10px;
        height: 100%;
        line-height: 25px;
        // width: 90px;
        display: flex;
        border: 1px solid #0f4656;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        cursor: pointer;
        &:hover {
        border: 1px solid #01fde0;
        .top {
          svg {
            color: #01fde0;
          }
        }
        .left-top-name {
            color: #01fde0;
        }
        }
        i {
          font-size: 34px;
        }
        .top {
          margin: 0 auto;
          width: 100%;
          height: 40%;
          border-radius: 50%;
          box-sizing: content-box;
          // border: 8px solid rgba($color: #184e5f, $alpha: 1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: column;
          svg {
            color: #71CDE6;
            font-size: 54px;
            margin-top: 20px;
          }
        }
        .left-top-name {
          color: #71CDE6;
          font-size: 20px;
            margin-bottom: 10px;

        }
        > span {
          // color: #ffffff10;
          font-weight: 300;
          font-size: 18px;
          display: inline-block;
          // width: 100%;
          // text-align: center;
          position: relative;
          left: 50%;
          transform: translateX(-50%);
          padding: 8px 0;
        }
        // img {
        // }
        img {
          width: auto;
          // height: 50px;
          transform: scale(1);
          padding: 10px;
          box-sizing: border-box;
        }
      }
    }
  }
}

::v-deep .el-progress__text {
  white-space: pre;
}
</style>
